{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书主页</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"/>
    <script src="{% static 'js/jquery-3.3.1.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
</head>
<body>
<div class="container">
    <button class="btn btn-primary" style="margin: 50px 5px;" data-toggle="modal" data-target="#createBookModal">新增图书
    </button>
    <button class="btn btn-primary" style="margin: 50px 5px;" data-toggle="modal" data-target="#createAuthorModal">
        新增作者
    </button>
    <button class="btn btn-primary" style="margin: 50px 5px;" data-toggle="modal" data-target="#createTagModal">新增标签
    </button>
    <a class="btn btn-default" style="margin: 50px 5px;" href="{% url 'user:logout' %}">退出登录
    </a>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th class="text-center">图书名称</th>
            <th class="text-center">书签</th>
            <th class="text-center">价格</th>
            <th class="text-center">作者</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {% for book in all_book %}
            <tr>
                <td>{{ book.name }}</td>
                <td>
                    {% for tag in book.tags.all %}
                        <span>{{ tag.tag }}</span>
                    {% endfor %}
                </td>
                <td>{{ book.price }}</td>
                <td>{{ book.author.name }}</td>
                <td>{{ book.create_at }}</td>
                <td>
                    <button class="btn btn-primary update" data-id="{{ book.id }}">修改</button>
                    <button class="btn btn-warning delete" data-id="{{ book.id }}">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <!--新增图书的模态框 start-->
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="createBookModal" tabindex="-1" role="dialog" aria-labelledby="bookModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="bookModalLabel">新增图书</h4>
                </div>
                <form method="post" action="{% url 'home' %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-group">
                            <label>书名:</label>
                            <input type="text" name="name" id="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>价格:</label>
                            <input type="text" name="price" id="price" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>标签:</label>
                            <div>
                                {% for tag in all_tag %}
                                    <label class="checkbox-inline">
                                        <input type="checkbox" name="tag" value="{{ tag.id }}"> {{ tag.tag }}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="form-group">
                            <label>作者:</label>
                            <select class="form-control" id="all_author" name="author">
                                {% for author in all_author %}
                                    <option value="{{ author.id }}">{{ author.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--新增图书的模态框 end-->
    <!--新增作者的模态框 start-->
    <div class="modal fade" id="createAuthorModal" tabindex="-1" role="dialog" aria-labelledby="authorModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="authorModalLabel">新增作者</h4>
                </div>
                <form method="post" action="{% url 'book:author' %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-group">
                            <label>作者名称:</label>
                            <input type="text" name="name" id="authorName" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="addAuthor">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--新增作者的模态框 end-->

    <!--新增tag模态框 start-->
    <div class="modal fade" id="createTagModal" tabindex="-1" role="dialog" aria-labelledby="tagModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="tagModalLabel">新增标签</h4>
                </div>
                <form method="post" action="{% url 'book:tag' %}">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-group">
                            <label>标签名称:</label>
                            <input type="text" name="tag" id="tag" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="addTag">提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--新增tag模态框 end-->
</div>
</body>
<script>
    // 定义获取token的方法
    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        return arr != null ? unescape(arr[2]) : null;
    }

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $(function () {
        // 删除图书
        $('#tbody').on('click', '.delete', function () {
            var id = $(this).attr('data-id');
            if (id) {
                $.ajax({
                    url: "{% url 'home' %}",
                    method: 'delete',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify({id: id}),
                    beforeSend: function (xhr, settings) {
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                        }
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            window.location = window.location;
                        }
                    }
                })
            }
        })

        // 获取图书详情
        $('#tbody').on('click', '.update', function () {

            var id = $(this).attr('data-id');
            if (id) {
                $.ajax({
                    url: '/book/book_article/' + id,
                    method: 'get',
                    success: function (data) {
                        if (data.code == 0) {

                        }
                    }
                })
            }
        })
    })
</script>
</html>